/**
 * 浮动按钮
 * Author: liuhong
 * Date: 2017-2-23
 */

import React from 'react';
import tool from '../../../../../utils/tool';


class FixedBtn extends React.Component {
    render() {
        const { widget } = this.props;

        const bright = widget.color ? tool.isBrightColor(widget.color || '000000') : false;

        const gradColor = tool.converionColor(widget.color);
        const grad = `linear-gradient(140deg, rgb(${gradColor.R},${gradColor.G},${gradColor.B}),#${widget.color})`;

        const inlineStyle = {
            borderRadius: `${widget.radius}px`,
            opacity: widget.opacity,
            background: widget.url && parseInt(widget.custom) ? 'none' : grad,
            height: '50px',
        };
        let fixedDefaultNode = '';
        if (!parseInt(widget.custom) || !widget.icon_src && !widget.url) {
            fixedDefaultNode =
              (<div className={`wgt-floating wgt-floating-${widget.action.type}-${bright}`}style={{ color: bright ? '#000000' : '#FFFFFF', height: '50px', display: widget.icon ? 'block' : 'none' }} />);
        }

        let fixedImgNode = '';
        if (widget.url && parseInt(widget.custom)) {
            fixedImgNode = <div style={{ background: `url(${widget.url}) no-repeat center`, height: '50px', backgroundSize: 'cover' }} />;
        }

        return (
          <div className="prevent-interaction">
            <div style={inlineStyle}>
              {fixedDefaultNode}
              {fixedImgNode}
            </div>
          </div>
        );
    }
 }
 FixedBtn.defaultProps = {
     icon: 1,
     type: 19,
     width: 50,
     height: 50,
     radius: "25",
     start_time: 0,
     color: "f76b1c",
     name: "floatingbtn",
     type_display: "",
     hideInLeftBar:1,//不在letbar显示
     icon_class: "icon-floating"
 }

export default FixedBtn;
